<template>
    <div class="dataWrap">

      <select v-model="Yselected" @change="postTime()">
        <option v-for="option in Y_list" v-bind:value="option">{{option}}</option>
      </select>

      <select v-model="Mselected" @change="postTime()" class="dataLR">
        <option v-for="option in M_list" v-bind:value="option">{{option}}</option>
      </select>

      <select v-model="Dselected" @change="postTime()">
        <option v-for="option in D_list" v-bind:value="option">{{option}}</option>
      </select>

      <select v-model="Hselected" @change="postTime()">
        <option v-for="option in HH_list" v-bind:value="option">{{option}}</option>
      </select>
      
      <select v-model="mselected" @change="postTime()" class="dataLR">
        <option v-for="option in MM_list" v-bind:value="option">{{option}}</option>
      </select>
      
      <p class="showtime">{{showTime}}</p>
    </div>
</template>

<script>
var m_year   = "年",
    m_month  = "月",
    m_day    = "日",
    m_hour   = "时",
    m_minute = "分",
    gap_time = 8,    //八小时后的时间间隔 / 每天最早预约时间点
    timeOver = 18,   //每天最晚预约时间点
    allHour  = 24,   //一天24小时
    MonthList = ["30","28","31","30","31","30","31","31","30","31","30","31"],  //非闰年一年中各月份天数
    MonthLists = ["30","29","31","30","31","30","31","31","30","31","30","31"],  //闰年一年中各月份天数
    //获取当前日期时间
    oDate    = new Date(),
    Y        = oDate.getFullYear(),       //当前年份
    M        = oDate.getMonth() + 1,      //当前月份
    D        = oDate.getDate(),           //当前日期
    HH       = oDate.getHours(),          //当前小时
    MM       = oDate.getMinutes(),        //当前分钟
    
    //以下注释可作为测试数据
    // Y        = 2017,
    // M        = 8,
    // D        = 30,
    // HH       = 4,
    // MM       = 40,

    dayNum = D,
    mouthNum = M,
    hourNum = HH + gap_time,
    overTime = hourNum - allHour,

    //数据临时仓库
    YY_lists = [],
    MM_lists = [],
    DD_lists = [],
    HH_lists = [],
    mm_lists = ["00分","15分","30分","45分"];

//日期为单个数的时候，前面补0
function checkTime(i){
  if (i<10){
    i="0" + i
  }
  return i
}

//判断是否为闰年年份
function isLeapYear(year){  
  return (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);  
}
  //13512766716
export default {
  data () {
    return {
      Y_list:{},             //最终年份数据
      M_list:{},             //最终月份数据
      D_list:{},             //最终日期数据
      HH_list:{},            //最终小时数据
      MM_list:{},            //最终分钟数据
      Yselected:"",          //当前选中年份的数据
      Mselected:"",          //当前选中月份的数据
      Dselected:"",          //当前选中日期的数据
      Hselected:"",          //当前选中小时的数据
      mselected:"",          //当前选中分钟的数据
      chooseYFlag:false,     //都是为了从第二次数据变化监听开始执行事件，第一次加载数据不需要执行相关事件
      chooseMFlag:false,     //都是为了从第二次数据变化监听开始执行事件，第一次加载数据不需要执行相关事件
      chooseDFlag:false,     //都是为了从第二次数据变化监听开始执行事件，第一次加载数据不需要执行相关事件
      chooseHFlag:false,     //都是为了从第二次数据变化监听开始执行事件，第一次加载数据不需要执行相关事件
      currentMMsize:true,    //保证只执行一次，为了获取当天的分钟
      currentMFlag:true,     //保证只执行一次，为了获取当天的年月
      currentMML:0,          //当前分钟
      currentHHsize:true,    //保证只执行一次，为了获取当天的年月日
      currentHHL:0,
      currentTime:0,         //当年的的年份月份日期
      currentTimeMM:0,       //当年的年份和月份
      currentTimeDD:0,       //当天的小时数
      showTime:0
    }
  },

  mounted(){
    //获取数据
    this.firstTime()
  },
  watch:{
    // 年份变动监听
    Yselected:function(val){
      var _this = this;
      if (_this.chooseYFlag) {
        //console.log(val)
          //this.Y_list[1]  永远是当前年份的第二年，这里是第二年，所以月份，日期，分钟都为默认第二年的数据，
          if (val==_this.Y_list[1]) {
            //console.log("这是第二年")
            _this.secondTime(); //初始化第二年的月份，日期，分钟数据

          }else{
            //console.log("这是第一年")
            _this.firstTime()
          }
      }else{
        _this.chooseYFlag = true
      };
      _this.watchHour();    //监听是否当前年月日，是重新加载当天小时点
    },
    // 月份变动监听
    Mselected:function(val){
      var _this = this;

      if (_this.currentMFlag) {
        _this.currentMFlag = false;
        _this.currentTimeMM = parseInt(_this.Yselected) + checkTime(parseInt(_this.Mselected));
        _this.currentTimeDD = parseInt(_this.Dselected);
        // _this.currentHHL = parseInt(HH_lists[0]);
      }else{
      };

      if (_this.chooseMFlag) {
        //加载日期
        var newVal = parseInt(val.substring(2,0)); //将数字与月单位拆分开
        DD_lists.splice(0,DD_lists.length);
        if (isLeapYear(parseInt(_this.Y_list[0]))) { //判断是否为闰年
          for (var i = 1; i <= MonthLists[newVal-1]; i++) {
            var numList = checkTime(i);
            DD_lists.push(numList + m_day);
          }
        }else{
          for (var i = 1; i <= MonthList[newVal-1]; i++) {
            var numList = checkTime(i);
            DD_lists.push(numList + m_day);
          }
        }
        _this.Dselected = DD_lists[0] //设置日期初始值
        //加载小时
        HH_lists.splice(0,HH_lists.length);
        for (var i = 8; i < 19; i++) {
          HH_lists.push(checkTime(i) + m_hour);
        }
        _this.Hselected = HH_lists[0] //设置日期初始值
        //加载分钟
        mm_lists = [];
        mm_lists = ["00分","15分","30分","45分"];
        _this.mselected = mm_lists[0] //设置日期初始值
        console.log(_this.mselected)
        _this.MM_list = mm_lists  //导入分钟
        
      }else{
        _this.chooseMFlag = true
      };
      _this.watchMonth();   //监听是否当前月份，是就加载当前月份剩余的天数，而不是从一号开始
      _this.watchHour();    //监听是否当前年月日，是重新加载当天小时点
      _this.postTime()
    },
    Dselected:function(val){
      var _this = this;
      var currentDay = parseInt(DD_lists[0]);
      var changeVal = parseInt(val);
      if (_this.currentHHsize) {
        _this.currentHHsize = false;
        _this.currentTime = parseInt(_this.Yselected) + checkTime(parseInt(_this.Mselected)) + checkTime(parseInt(_this.Dselected));
        _this.currentHHL = parseInt(HH_lists[0]);
      }else{
      };
      if (_this.chooseDFlag) {
        if (currentDay!==changeVal) {
            HH_lists.splice(0,HH_lists.length);
            for (var i = 8; i < 19; i++) {
              HH_lists.push(checkTime(i) + m_hour);
            }
            _this.HH_list = HH_lists  //导入小时
            _this.Hselected = HH_lists[0] //设置日期初始值
            mm_lists = [];
            mm_lists = ["00分","15分","30分","45分"];
            _this.mselected = mm_lists[0] //设置日期初始值
            _this.MM_list = mm_lists  //导入分钟
        }else{
          _this.watchHour();    //监听是否当前年月日，是重新加载当天小时点
        }
      }else{
        _this.chooseDFlag = true
      };
      _this.watchHour();    //监听是否当前年月日，是重新加载当天小时点
      _this.postTime()
    },
    Hselected:function(val){
      var _this = this;
      var currentHH = parseInt(HH_lists[0]);
      var changeVal = parseInt(val);

      if (_this.currentMMsize) {
        _this.currentMMsize = false
        _this.currentMML = mm_lists.length
      }
      
      if (_this.chooseHFlag) {
        if (currentHH==changeVal) {
          if (_this.currentMML==1) {
            mm_lists = [];
            mm_lists = ["00分"];
          }
          else if(_this.currentMML==2){
            mm_lists = [];
            mm_lists = ["30分","45分"];
          }
          else if(_this.currentMML==3){
            mm_lists = [];
            mm_lists = ["15分","30分","45分"]
          }
          else{
            mm_lists = [];
            mm_lists = ["00分","15分","30分","45分"]
          }
          _this.mselected = mm_lists[0] //设置日期初始值
          _this.MM_list = mm_lists  //导入分钟
        }else{
          mm_lists = [];
          mm_lists = ["00分","15分","30分","45分"];
          _this.mselected = mm_lists[0] //设置日期初始值
          _this.MM_list = mm_lists  //导入分钟
        }
      }else{
        _this.chooseHFlag = true
      }
      _this.postTime()
    }
  },
  methods:{
    //子组件传递数据 （当前选择的时间） 给父组件
    postTime(){
      var timeMsg = checkTime(parseInt(this.Yselected)) +'-'+ 
                    checkTime(parseInt(this.Mselected)) +'-'+ 
                    checkTime(parseInt(this.Dselected)) +' '+ 
                    checkTime(parseInt(this.Hselected)) +':'+ 
                    checkTime(parseInt(this.mselected));

      this.$emit('data', timeMsg);
      this.showTime = timeMsg

    },
    //监听是否当前年月日，是重新加载当天小时点
    watchHour(){
      var _this = this;
      var currentTimeNew = parseInt(_this.Yselected) + checkTime(parseInt(_this.Mselected)) + checkTime(parseInt(_this.Dselected));
      if (currentTimeNew !== _this.currentTime) {
      }else{
        HH_lists.splice(0,HH_lists.length);
        for (var i = _this.currentHHL; i < 19; i++) {
          HH_lists.push(checkTime(i) + m_hour);
        }
        _this.Hselected = HH_lists[0] //设置小时初始值
      }
    },

    //监听是否当前年月日，是重新加载当月天数
    watchMonth(){
      var _this = this;
      var currentTimeNew = parseInt(_this.Yselected) + checkTime(parseInt(_this.Mselected));
      if (currentTimeNew !== _this.currentTimeMM) {
      }else{
        _this.initDay(1,_this.currentTimeDD)
      }
    },


    //设置初始值
    initVal(){
      this.Mselected = MM_lists[0] //设置月份初始值
      this.Hselected = HH_lists[0] //设置小时初始值
      this.mselected = mm_lists[0] //设置分钟初始值
    },

    //导入最终数据
    inResult(){
      this.M_list = MM_lists   //导入月份
      this.HH_list = HH_lists  //导入小时
      this.MM_list = mm_lists  //导入分钟
    },

    //判断是否是闰年，来加载日期
    initDay(num,start){
      var startMsg= 1;
      if (start>1) {
        startMsg = start
      };
      DD_lists.splice(0,DD_lists.length);
      if (isLeapYear(parseInt(this.Y_list[num]))) { //判断是否为闰年
        for (var i = startMsg; i <= MonthLists[mouthNum-1]; i++) {
          var numList = checkTime(i);
          DD_lists.push(numList + m_day);
        }
      }else{
        for (var i = startMsg; i <= MonthList[mouthNum-1]; i++) {
          var numList = checkTime(i);
          DD_lists.push(numList + m_day);
        }
      };
      this.Dselected = DD_lists[0] //设置日期初始值
      this.D_list = DD_lists       //导入天数
    },

    //加载月份
    initMonth(start){      //star 是否是当月，如果是当月就以star的值加载，不然就是以1开始加载数据
      var startMsg= 1;
      if (start>1) {
        startMsg = start
      };
      MM_lists.splice(0,MM_lists.length);
      for (var i = startMsg; i < 13; i++) {
          MM_lists.push(checkTime(i) + m_month);
      }
      this.Mselected = MM_lists[0] //设置月份初始值
      this.M_list = MM_lists       //导入月份
    },

    //加载年份
    initYear(){
      YY_lists.splice(0,YY_lists.length);
      for (var i = 0; i < 2; i++) {
        var yearNum = Y;
        var numList = yearNum + i;
        YY_lists.push(numList + m_year);
      }
      this.Yselected = YY_lists[0] //设置当前年份初始值
      this.Y_list = YY_lists       //导入当前年份和下一年年份
    },

    //加载小时
    initHour(){
      if (hourNum>allHour) {                           //判断是否超过24点，如果超过24点，第二天的预约时间就是第二天早上八点加上超出的时间
        var addT = hourNum - allHour;
        for (var i = 7 + addT; i < 19; i++) {
          HH_lists.push(checkTime(i) + m_hour);
        }
      }else{                                           //判断是否超过24点，如果没有超过24点，预约的小时就是第二天8点开始，
        for (var i = 8; i < 19; i++) {
          HH_lists.push(checkTime(i) + m_hour);
        }
      }
    },

    // 页面进入渲染时间数据 
    firstTime(){
      var _this = this;
      
      //导入年份
      _this.initYear();
      //导入月份
      _this.initMonth(mouthNum);
      //导入日期
      _this.initDay(0,dayNum);

      //加载分钟
      if(MM>0 && MM<=15){
        mm_lists = ["15分","30分","45分"];
      }
      if(MM>15 && MM<=30){
        mm_lists = ["30分","45分"];
      }
      if(MM>30 && MM<=45){
        mm_lists = ["45分"];
      }
      if(MM>45 && MM<=60){
        mm_lists = ["00分"];
      }
      if(MM==60){
        mm_lists = ["00分","15分","30分","45分"];
      }

      //小时 
      //清空小时数组内容
      HH_lists.splice(0,HH_lists.length);
      if (hourNum<timeOver) {                           //当前时间加上8小时后的时间，如果没有超过18：00，而且分钟为0，则预约时间为第二天8点开始
        for (var i = hourNum; i < 19; i++) {
          HH_lists.push(checkTime(i) + m_hour);
        }
      }else{                                            //当前时间加上8小时后的时间，超过18：00
        if (_this.D_list.length == 1) {                 //这里是天数最后一天，而且是晚上18点后预约时间出来
          if (_this.M_list.length == 1) {               //如果也是最后一个月
            //年份
            var yearNum = Y;
            var numList = yearNum + 1;
            YY_lists.splice(0,YY_lists.length);
            YY_lists.push(numList + m_year);
            _this.Yselected = YY_lists[0]               //设置当前年份初始值
            _this.Y_list = YY_lists                     //导入当前年份和下一年年份
            //导入月份
            _this.initMonth(0)
            //导入日期
            _this.initDay(0);   
            //判断是否超过24点，如果超过24点，第二天的预约时间就是第二天早上八点加上超出的时间
            _this.initHour();
          }else{
            //导入月份
            _this.initMonth(mouthNum+1)
            //导入日期
            _this.initDay(0);     
            //判断是否超过24点，如果超过24点，第二天的预约时间就是第二天早上八点加上超出的时间
            _this.initHour();
          }
        }else{                                          //如果日期不是最后一天
          //预约日期提前一天了
          _this.D_list.splice(0,1)      
          //设置日期初始值
          _this.Dselected = DD_lists[0] 
          //判断是否超过24点，如果超过24点，第二天的预约时间就是第二天早上八点加上超出的时间
          _this.initHour();
          mm_lists = ["00分","15分","30分","45分"];
        _this.mselected = mm_lists[0] //设置日期初始值
        _this.MM_list = mm_lists  //导入分钟
        }
      }
      
      //设置初始值
      _this.Hselected = HH_lists[0] //设置小时初始值
      _this.mselected = mm_lists[0] //设置分钟初始值
      //导入最终数据
      _this.HH_list = HH_lists  //导入小时
      _this.MM_list = mm_lists  //导入分钟
    },
    secondTime(){
      var _this = this;
      //清空数组内容
      MM_lists.splice(0,MM_lists.length);
      HH_lists.splice(0,HH_lists.length);
      //加载月份
      for (var i = 1; i < 13; i++) {
        var numList = checkTime(i);
        MM_lists.push(numList + m_month);
      }
      //加载日期
      _this.initDay(1); 
      //加载小时
      for (var i = 8; i < 19; i++) {
        var numList = checkTime(i);
        HH_lists.push(numList + m_hour);
      }
      //加载分钟
      mm_lists = ["00分","15分","30分","45分"];
      //设置初始值，月份，日期，小时，分钟初始值
      //_this.initVal()

      _this.Mselected = MM_lists[0] //设置月份初始值
      _this.Hselected = HH_lists[0] //设置小时初始值
      _this.mselected = mm_lists[0] //设置分钟初始值
      //导入最终数据，月份，天数，小时，分钟
      //_this.inResult()    
      _this.M_list = MM_lists   //导入月份
      _this.HH_list = HH_lists  //导入小时
      _this.MM_list = mm_lists  //导入分钟   
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dataWrap{font-size: 0;padding: 2.4rem 0.3rem 0 0.3rem;}
.dataWrap>select{display: inline-block;width: 30%;font-size: 0.3rem;background-image: url(../../static/img/subscribe/subscribe04.png);background-repeat: no-repeat;background-position: 92% 0.22rem;background-size: 14%;height: 0.64rem;line-height: 0.32rem; margin-bottom: 0.15rem;border: 1px solid #d3d3d3;padding: 0.08rem 0.4rem 0.08rem 0.16rem;color: #787878;background-color: #fff;}
.dataWrap>select option{font-size: 0.3rem;}
.dataLR{margin: 0 5%;}
.showtime{font-size: 0.3rem;color: #fff}
</style>